<template>
  <div>
    <el-card shadow="never" class="mb20">
      <div slot="header">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <!-- <el-form :model="form" :label-position="labelPosition" label-width="110px"> -->
      <el-tabs class="person-tabs" :tab-position="tabPosition">
        <el-tab-pane label="基本信息">
          <basic-comp @showHistory="handleShowHistory" ref="basicComp" />
        </el-tab-pane>
        <el-tab-pane label="奖惩记录">
          <reward-table ref="rewardTable" />
        </el-tab-pane>
        <el-tab-pane label="考评记录">
          <eval-table ref="evalTable" />
        </el-tab-pane>
        <el-tab-pane label="家庭成员">
          <family-comp ref="familyComp" />
        </el-tab-pane>
        <el-tab-pane label="任职信息">
          <office-comp @showHistory="handleShowHistory" ref="officeComp" />
        </el-tab-pane>
        <el-tab-pane label="合同信息">
          <contract-comp @showHistory="handleShowHistory" ref="comtractComp" />
        </el-tab-pane>
        <el-tab-pane label="执业资格">
          <qualification-comp ref="qualificationComp" />
        </el-tab-pane>
        <el-tab-pane label="专业技术服务">
          <expertise-comp ref="expertiseComp" />
        </el-tab-pane>
        <el-tab-pane label="履历信息">
          <work-comp ref="workComp" @showHistory="handleShowHistory" />
        </el-tab-pane>
        <el-tab-pane label="教育经历">
          <edu-comp @showHistory="handleShowHistory" ref="eduComp" />
        </el-tab-pane>
        <el-tab-pane label="培训信息">
          <train-comp @showHistory="handleShowHistory" ref="trainComp" />
        </el-tab-pane>
        <!-- <el-tab-pane label="签名管理">
          <sign-comp ref="signComp" />
        </el-tab-pane>-->
        <!-- <el-tab-pane label="家庭信息">
            <family-comp ref="familyComp" />
          </el-tab-pane>
          <el-tab-pane label="考核信息">
            <examine-comp ref="examineComp" />
          </el-tab-pane>
          <el-tab-pane label="专业技术服务">
            <el-row :gutter="24" class="pl80">
              <el-col>
                <h2>专业技术服务</h2>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="处罚情况">
            <el-row :gutter="24" class="pl80">
              <el-col>
                <h2>处罚情况</h2>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="奖励情况">
            <el-row :gutter="24" class="pl80">
              <el-col>
                <h2>奖励情况</h2>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="执业资格信息">
            <el-row :gutter="24" class="pl80">
              <el-col>
                <h2>执业资格信息</h2>
              </el-col>
            </el-row>
        </el-tab-pane>-->
      </el-tabs>
      <!-- </el-form> -->
    </el-card>
    <history-modal ref="historyModal" />
  </div>
</template>

<script>
import { userInfo, infoUpdate } from '@/api/auth'
import OfficeComp from './OfficeComp'
import ContractComp from './ContractComp'
// import FamilyComp from './FamilyComp'
import BasicComp from './BasicComp'
import TrainComp from './TrainComp'
import EduComp from './EduComp'
import WorkComp from './WorkComp'
import RewardTable from './RewardTable'
import EvalTable from './EvalTable'
import QualificationComp from './QualificationComp'
import HistoryModal from './HistoryModal'
import FamilyComp from './FamilyComp'
import ExamineComp from './ExamineComp'
import SignComp from './SignComp'
import ExpertiseComp from './ExpertiseComp'
import { removeSession } from '@/utils/util'

export default {
  components: {
    OfficeComp,
    ContractComp,
    BasicComp,
    TrainComp,
    HistoryModal,
    EduComp,
    WorkComp,
    FamilyComp,
    ExamineComp,
    RewardTable,
    EvalTable,
    SignComp,
    QualificationComp,
    ExpertiseComp
  },
  props: ['userId'],
  data() {
    return {
      tabPosition: 'left',
      labelPosition: 'right',
      userInfo: this.$store.getters.userInfo,
      form: {},
      inputWidth: {
        width: '80%'
      },
      member: 1
    }
  },
  watch: {
    userId(n, o) {
      if (n && n !== o) {
        this.getUserInfo()
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    // handleBack() {
    //   this.$router.go(-1)
    // },
    handleDeptSelect(value) {
      console.log('value', value)
    },
    getUserInfo() {
      const userId = this.userId || this.userInfo.userId
      userInfo(userId, {}).then(res => {
        this.form = Object.assign({}, res.data)
        console.log('userInfo', res)
      })
    },
    handleAddMember() {
      this.member = this.member + 1
    },
    handleShowHistory(type) {
      this.$refs.historyModal.show(type)
    },
    handleUpdate() {
      // infoUpdate(this.form).then(res => {
      //   console.log('update res', res)
      // })
    }
  },
  destroyed() {
    removeSession('userRow')
  }
}
</script>

<style scoped>
.person-tabs >>> .el-tabs__item {
  width: 220px;
  text-align: left;
}
.pl80 {
  padding-left: 80px;
}
</style>